﻿@using InfoTech.VinhSon.Bussiness
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section script
{
    <script type="text/javascript">
        $(document).ready(function () {
            aminationArticle();
        });
        var index = 0;

        function aminationArticle() {
            var obj = $('div.article .article_detail');
            if (index >= obj.length) {
                index = 0;
            }
            if (index == 0) {
                $('#div_' + (obj.length - 1)).css('display', 'none');
                $('#div_' + index).fadeIn();
            } else {
                $('#div_' + (index - 1)).css('display', 'none');
                $('#div_' + index).fadeIn();
            }
            index++;
            setTimeout(aminationArticle, 5000);
        }
    </script>
}
@section style
{
    <style type="text/css">
        /* Home 1 */
        .home
        {
            background: url(@Url.Content("~/Content/Images/home.jpg")) no-repeat;
            width: 908px;
            margin: 5px auto;
            height: 748px;
            position: relative;
        }
        .home .navigator
        {
            width: 250px;
            position: absolute;
            right: 20px;
            top: 80px;
        }
        .home .article
        {
            width: 350px;
            border: none;
            position: absolute;
            top: 120px;
            left: 20px;
            border-radius: 0;
        }
        .home .article img, .img
        {
            margin: 0 20px 15px 0;
            border: 5px solid #fff;
            -webkit-box-shadow: 1px 1px 2px #e6e6e6;
            -moz-box-shadow: 1px 1px 2px #e6e6e6;
            box-shadow: 5px 5px 10px #e6e6e6;
            cursor: pointer;
        }
        .home .article .title
        {
            color: #0377BA;
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
        }
        .home .article .description
        {
            color: #6c3403;
        }
        .home .article .more
        {
            float: right;
            color: #0377BA;
            font-style: italic;
            text-decoration: none;
            font-size: 15px;
        }
        .photo-link {
          position: absolute;
            width: 270px;
            height: 200px;
            top: 540px;
        }
    </style>
}
<div class="home">
    <a title="@ViewBag.LinkTooltip" class="photo-link" href="@ViewBag.Link"></a>
    <div class="article">
        @{
            List<Article> q0 = new List<Article>();
            if (ViewBag.Top10Articles != null)
            {
                q0.AddRange((List<Article>)ViewBag.Top10Articles);
            }
            int index = 0;
            foreach (Article article in q0)
            {
            <div id="div_@(index++)" class="article_detail" style="display: none;">
                <a href="@article.GetUrl()">
                    <img src="/Resource/Article/@article.Thumbnail" width="300" height="225"></a>
                <br />
                <a class="title" href="@article.GetUrl()">@article.Name</a>
                <p class="description">
                    @Html.Raw(article.Description)
                </p>
                <a class="more" href="@article.GetUrl()">Chi tiết</a>
                <div class="clear">
                </div>
            </div>
            }
        }
    </div>
    <div class="navigator clear">
         @Html.Action("IndexRightColumn")
    </div>
</div>
